<template>
    <div id="detaiView">
        <ol class="breadcrumb">
            <li v-for="(item,index) in breadcrumb" :key="index">
                {{item}}
            </li>
             <div class="navBarRight">
                <el-button size="mini" type="primary" class="glyphicon glyphicon-user" @click="showUserInfo"
                style="display:flex;flex-direction:row;justify-content:space-around;align-items:center"
                >
                   {{account.accountName}}
                </el-button>
                <el-button size="mini" type="danger" class="glyphicon glyphicon-off" @click="logout">
                    退出
                </el-button>
             </div>
        </ol>
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
export default {
    props: {
        routeList: {
            type: Array
        }
    },
    data(){
        return {
            account: {},
            breadcrumb: [] //面包屑
        }
    },
    methods: {
          //退出登录
        logout(){
            var action = ()=>{
                localStorage.clear();
                this.$router.push({name: 'login'})
            }
            this.operatorConfirm(action,'退出');   
        },
        showUserInfo(){
            this.$router.push({name: 'UserInfo'});
        },
    },
    created(){
        var account = JSON.parse(localStorage.getItem('responseData')).account;
        this.account = account;
        if(this.routeList.length){
            this.breadcrumb = this.routeList;
            localStorage.setItem("routeList",JSON.stringify(this.routeList));
        }else{
            this.breadcrumb = JSON.parse(localStorage.getItem('routeList'));
        }
    },
    watch: {
        routeList(newValue){
             if(this.routeList.length){
                this.breadcrumb = this.routeList;
                localStorage.setItem("routeList",JSON.stringify(this.routeList));
            }else{
                this.breadcrumb = JSON.parse(localStorage.getItem('routeList'));
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .breadcrumb {
        display: flex;
        flex-direction: row;
        height: 44px;
    }
    .fade-enter-active,.fade-leave-active {
        transition: all .3s;
        opacity: 0;
    }
    .fade-enter,.fade-leave-to {
        opacity: 0;
    }
    #detaiView {
        position: absolute;
        left: 150px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }
    .container {
        position: absolute;
        top: 44px;
        width: 100%;
    }
    .breadcrumb {
        margin-bottom: 0 !important;
    }
    .navBarRight{
        position:absolute;
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        right: 20px;
        span {
            text-align: center;
            width: 50%;
            line-height: 33px;
            color: #303133;
            &:nth-child(1){
                border-right: 1px solid lightgray;
            }
            &:hover{
                background: white;
                color: #303133;
            }
        }
    }
</style>
